<template>
  <div class="loginView">
    <div class="loginPanel">
      <div class="border">
        <div class="part" style="background:rgb(195,226,121)"></div>
        <div class="part" style="background:rgb(247,254,200)"></div>
        <div class="part" style="background:rgb(255,208,105)"></div>
        <div class="part" style="background:rgb(142,118,105)"></div>
        <div class="part" style="background:rgb(220,156,190)"></div>
        <div class="part" style="background:rgb(192,154,224)"></div>
        <div class="part" style="background:rgb(150,157,204)"></div>
      </div>
      <div class="avatar">
        <span v-show="showIcon" transition="fade">{{iconChar}}</span>
      </div>
      <x-input icon="zmdi zmdi-account" class="mb10" placeholder="用户名或邮箱" :value.sync="username"></x-input>
      <x-input icon="zmdi zmdi-lock" class="mb10" type="password" placeholder="密码" :value.sync="password"></x-input>
      <x-button type="danger" @click="doLogin">登录</x-button>
    </div>
  </div>
</template>

<script>
  import {login, getLoginedUser} from '../apis/common'
  import {setUser} from '../vuex/actions'
  export default {
    vuex: {
      actions: {setUser}
    },
    data: () => ({
      iconChar: '',
      showIcon: false,
      username: '',
      password: ''
    }),
    watch: {
      username (v) {
        let to = this.username ? this.username.substring(0, 1).toUpperCase() : ''
        if (this.iconChar === to) return
        this.showIcon = false
        setTimeout(() => {
          this.iconChar = to
          this.showIcon = true
        }, 1000)
      }
    },
    methods: {
      doLogin () {
        login(this.username, this.password).then(({data: {success, token, msg}}) => {
          if (success) {
            window.sessionStorage.setItem('token', token)
            getLoginedUser().then(({data: {success, user}}) => {
              console.log(user)
              if (success) this.setUser(user)
            })
          } else {
            window.alert(msg)
          }
        })
      }
    }
  }
</script>

<style lang="stylus">
  @import '../styles/variables'
  @import '../styles/mixins'
  .loginView
    relative: top left
    size: 100% 100%
    background-color: rgb(90, 200, 225)
    .loginPanel
      absolute: top 50% left 50%
      transform: translate(-50%,-50%)
      padding: 80px 50px
      size: 300px auto
      background-color: white
      shadow-style: 4px
      border-radius: $radius
      .border
        absolute: top left
        overflow: hidden 
        display: flex
        size: 100% 4px
        border-radius: $radius $radius 0 0
        flex-direction: row
        .part
          flex: 1
      .avatar
        absolute: top 0 left 50%
        transform: translate(-50%,-50%)
        display: block
        size: 80px
        overflow: hidden
        border-radius: 80px
        background-color: $gray
        shadow-style: 4px
        color: $primary
        font-size: 60px
        text-align: center
        line-height: 80px
</style>